
<template>


  <lay-container fluid="true" class="dictionary-box">
    <div style="display: flex">
      <div :style="{ width: isFold ? `0px` : `300px` }" class="left-tree">
        <!-- tree -->
        <!-- <div v-show="!isFold">


        </div> -->

        <lay-tree :data="data" :showLine="showLine" @node-click="getdic"	>
        </lay-tree>
        <div class="isFold" @click="isFold = !isFold">
          &nbsp;<lay-icon v-if="!isFold" class="layui-icon-left"></lay-icon>
          <lay-icon v-else class="layui-icon-right"></lay-icon>
        </div>
      </div>
      <div class="table-box" style="flex: 1; padding: 10px;  overflow: auto;height:  calc(100vh - 110px)">
        <lay-table :loading="config.loading" :columns="config.columns" :page="config.page" @change="change"
            :data-source="config.data" class="project-grids">

            <template #toolbar>
              <lay-input v-model="config.search.name" size="sm" placeholder="搜索" suffix-icon="layui-icon-search"
                style="width: 20%;"></lay-input>

              <lay-button-group v-for="n in listbutton.toolbarbuttons" :key="n">
                <lay-button :size="n.size" :type="n.status" border-style="dashed" @click="Events(n, null)"> {{ n.name
                }}</lay-button>
              </lay-button-group>
            </template>
            <template v-slot:operator="{ row }">
              <span v-for="n in listbutton.rowbuttons" :key="n">
                <lay-tooltip :content="n.name" position="bottom" :is-dark="true">
                  <button class="a-button type--button is--circle" circle @click="Events(n, row)">
                    <lay-icon :type="n.icon" :color="n.color">

                    </lay-icon>
                  </button>
                </lay-tooltip>

              </span>

            </template>
          </lay-table>
    

      </div>
    </div>


  </lay-container>
</template>

<script setup lang="ts">

import webosutils from 'webosutils';
import { layer } from '@layui/layer-vue'
import { useRouter, useRoute } from 'vue-router';
import utils from '../../utils/utils';
import { LayerForm} from 'webos-form-design';
import listurils from '../../utils/listutils';
import { ref } from 'vue';
const showLine = ref(false);
const data = ref([]);
const router = useRouter();
const route = useRoute();
const isFold = ref(false)
const listbutton = ref({
  rowbuttons: [] as any,
  toolbarbuttons: [] as any,
});
debugger
const size = ref("sm");
const config = ref({
  loading: true,
  data: [],
  selectedKeys:[],
  selectedKey:"",
  page: {
    total: 0,
    limit: 10,
    current: 1,
    showRefresh: true,
    limits: [5, 10, 20, 50, 100, 200]
  },
  columns: [

    { key: 'id', title: '唯一Id',  ellipsisTooltip:true },
    { key: 'title', title: '标题' },
 
    { key: 'code', title: '唯一标识', },
    { key: 'icon', title: '图标', },
    { key: 'sort', title: '排序号', },
    {
      title: "操作",
      width: "150px",
      fixed: "right",
      customSlot: "operator",
      key: "operator"
    }
  ],
  api: "",
  search: {
    id: "",
    name: ""
  }
});

listurils.getButton(route.query.appid, config, listbutton).then((res: any) => {


  if (res.success) {
    config.value.api = res.data.api;
    if (listbutton.value.toolbarbuttons.length > 0) {
      size.value = listbutton.value.toolbarbuttons[0].size;
    }
    listurils.searchEvent(config);
  } else {
    layer.notify({
      title: "Error",
      content: res.msg,
      icon: 2
    })
  }

});
const getdic = (item: any) => {
   ;
  config.value.search.id = item.id;
  listurils.searchEvent(config);
}

const change = (p: any) => {

  config.value.page.current = p.current;
  config.value.page.limit = p.limit;
  listurils.searchEvent(config);
}
const findList = (id:string) => {

  var page: any, limt: any;

  page = config.value.page.current;
  limt = config.value.page.limit;
  config.value.loading = true;
 webosutils.http.post("/v1/api/form/GetDictionaryByID", { id: id, page: page, limit: limt }).then((res:any) => {
    config.value.loading = false;

    if (res.success) {
      data.value = res.data;

    }
  });

}
if(route.query.parentid&&route.query.parentid==null&&route.query.parentid!=''){

  findList(route.query.parentid+'');

}else{
  findList('00000000-0000-0000-0000-000000000000');
}


const Callback = (res: any) => {
  if (res.success) {

    listurils.searchEvent(config);

  } else {
    layer.notify({ title: "温馨提示", content: res.msg })
  }

}


const Events = (ent: any, row: any) => {
  try {

    switch (ent.events) {
      case "editEvent":
        if (ent.ispopup == 0) {
          var query = new Object() as any;
          query.fromid = ent.formid;
          query.instanceid = row.instanceid;
          query.zhuanti = row.classid;
          query.tabname = encodeURIComponent(row.title);
          router.push({ path: "/formdesign/submitfrom", query: query})


        } else {
          listurils.editRowEvent(LayerForm, ent, row, { fromid: ent.formid, instanceid: row.id, callback: Callback }, {});

        }
        break;
      case "searchEvent":
        if (config.value.page) {
          listurils.searchEvent(config);
        }

        break;
      case "deleteEvent": listurils.removeRowEvent(ent, row, listurils.searchEvent, config);
        break;
      case "addEvent":
        if (ent.ispopup == 0) {
          var query = new Object() as any;
          query.fromid = ent.formid;
          query.instanceid = "";
          query.zhuanti = route.query.parentid;
          query.tabname = encodeURIComponent(ent.title);
          router.push({ path: ent.api, query: query })

          
        } else {
          if (row != null) {
            listurils.addEvent(LayerForm, ent, { fromid: ent.formid, instanceid: "", callback: Callback }, { parentid: row.id });
          } else {
            listurils.addEvent(LayerForm, ent, { fromid: ent.formid, instanceid: "", callback: Callback }, {});
          }


        }
        break;

      case "previewEvent": listurils.previewEvent(LayerForm, ent, row);
        break;      case "cloneEvent": listurils.cloneRowEvent(LayerForm, ent, row, { fromid: ent.formid, instanceid: row.id, callback: Callback },  { id: "" });
        break;
    }
  } catch (e) {
    layer.msg("按钮解析失败", { icon: 3, time: 1000 })
  }

}
</script>

<style scoped>
.dictionary-box {
    /* width: calc(100vw - 240px); */
  height: calc(100vh - 110px);
  margin-top: 10px;
  box-sizing: border-box;
  background-color: #fff;
  overflow: hidden;
}
.left-tree {
  display: inline-block;
  padding: 20px 15px 0 5px;
  height: 1200px;
  border-right: 1px solid #e6e6e6;
  box-sizing: border-box;
  position: relative;
}
/* todo layui-tree-entry 设置无效 */
.layui-tree-entry {
  /* position: relative; */
  padding: 10px 0;
  height: 20px;
  line-height: 20px;
  white-space: nowrap;
}
.isFold {
  position: absolute;
  top: 36%;
  right: -10px;
  width: 26px;
  height: 26px;
  line-height: 26px;
  border-radius: 13px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  cursor: pointer;
}

.search-input {
  display: inline-block;
  width: 98%;
  margin-right: 10px;
}

.isChecked {
  display: inline-block;
  background-color: #e8f1ff;
  color: red;
}
</style>